<template>
  <page-frame>
    <div class="business-centre">

        <el-row :gutter="10" style="margin-bottom: 8px;">
          <div class="centre-top">
            <el-col :span="6">
              <div class="block">
                <span class="number" style="color:#d9534f;" v-text="orgInfo.totalMemberNum"></span>
                <span class="words" style="color:rgb(145,140,140);">人</span>
                <p class="ps" style="color:rgb(145,140,140);">会员总数</p>
              </div>
            </el-col>
            <el-col :span="6">
                <div class="block">
                  <span class="number" style="color:#5cb85c;" v-text="orgInfo.totalEmpNum"></span>
                  <span class="words">人</span>
                  <p class="ps">员工总数</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="padding-top: 20px">
                  <span class="number" style="color:#f0ad4e;font-size: 75px">{{orgInfo.usingRooms}}/{{orgInfo.totalRooms}}</span>
                  <span class="words" style="font-size: 16px">间</span>
                  <p class="ps">房间占用比  <span class="words" style="font-size: 14px">(使用/总数)</span></p>
                </div>
            </el-col>
            <el-col :span="6">
              <div class="block" style="padding-top: 20px">
                <span class="number" style="color:#337ab7;font-size: 75px">{{orgInfo.usingBeds}}/{{orgInfo.totalBeds}}</span>
                <span class="words" style="font-size: 16px">张</span>
                <p class="ps">床位占用比 <span class="words" style="font-size: 14px">(使用/总数)</span></p>
              </div>
            </el-col>
          </div>
        </el-row>
      <ul class="centre-main">
        <el-row :gutter="5" style="margin-bottom: 7px;">
          <el-col :span="6"><li class="pie-chart"><echart :chartOption = "sexPieOption1" :index="'first'"></echart></li></el-col>
          <el-col :span="6"><li class="bar-chart"><echart :chartOption = "agePieOption2" :index="'second'"></echart></li></el-col>
          <el-col :span="12"><li class="bar-chart"><echart :chartOption = "careColumnOption3" :index="'third'"></echart></li></el-col>
        </el-row>
        <el-row :gutter="5" style="margin-bottom: 7px;">
          <el-col :span="16"><li class="bar-chart"><echart :chartOption = "financeColumnOption4" :index="'fourth'"></echart></li></el-col>
          <el-col :span="8"><li class="pie-chart"><echart :chartOption = "incomePieOption5" :index="'fifth'"></echart></li></el-col>
        </el-row>
        <el-row :gutter="5" style="margin-bottom: 7px;">
          <el-col :span="6"><li class="pie-chart"><echart :chartOption = "emPieOption6" :index="'sixth'"></echart></li></el-col>
          <el-col :span="12"><li class="bar-chart"><echart :chartOption = "bedColumnOption7" :index="'seventh'"></echart></li></el-col>
          <el-col :span="6"><li class="pie-chart"><echart :chartOption = "jobLineOption8" :index="'eighth'"></echart></li></el-col>
        </el-row>
        <el-row :gutter="5" style="margin-bottom: 7px;">
          <el-col :span="7"><li class="pie-chart"><echart :chartOption = "roomPieOption9" :index="'ninth'"></echart></li></el-col>
          <el-col :span="7"><li class="bar-chart"><echart :chartOption = "roomPieOption10" :index="'tenth'"></echart></li></el-col>
          <el-col :span="10"><li class="pie-chart"><echart :chartOption = "bedIncomeColumnOption11" :index="'eleventh'"></echart></li></el-col>
        </el-row>
      </ul>
    </div>
  </page-frame>
</template>
<script>
  import businessApi from '../../service/corporation/businessApi';
  import echart from '../../components/chart/echart'

  export default {
    data() {
      return {
        activeName: 'first',
        orgInfo:{
          totalBeds: 0,
          totalEmpNum: 0,
          totalMemberNum: 0,
          totalRooms: 0,
          usingBeds: 0,
          usingRooms: 0
        },
        sexPieOption1:{
          title : {
//            text: '男女构成比',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['男','女']
          },
          color: ["#3cbbb0", "#7089ce", "#faa753", "#f68d58", "#52d0cc", "#f6b91c", "#f68d58"],
          series : [
            {
              name: '',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
//                {value:335, name:'男'},
//                {value:310, name:'女'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        agePieOption2:{
          title : {
//            text: '年龄构成比',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
//            data: ['60-70','70-80','80-90','90-100']
          },
          color: ["#3cbbb0", "#7089ce", "#faa753", "#f68d58", "#52d0cc", "#f6b91c", "#f68d58"],
          series : [
            {
              name: '',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
//                {value:280, name:'60-70'},
//                {value:200, name:'70-80'},
//                {value:120, name:'80-90'},
//                {value:20, name:'90-100'},

              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        careColumnOption3: {
          title : {
//            text: '会员照护等级',
//            x:'center'
          },
          color: ['#3cbbb0'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
//              data : ['护理一级','护理二级','护理三级','护理四级','护理五级'],
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'',
              type:'bar',
              barWidth: '50%',
//              data:[10, 52, 200, 334, 390]
            }
          ]
        },
        financeColumnOption4:{
          title : {
//            text: '财政收入占比',
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
          color: ["#3cbbb0", "#f6b91c", "#fa7a53", "#7089ce", "#61deb9"],
          legend: {
//            data:['餐饮费','床位费','押金','医药费']
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
//              data : ['1月','2月','3月','4月','5月','6月']
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
//            {
//              name:'餐饮费',
//              type:'bar',
//              data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
//              markPoint : {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
//              },
//              markLine : {
//                data : [
//                  {type : 'average', name: '平均值'}
//                ]
//              }
//            },
//            {
//              name:'床位费',
//              type:'bar',
//              data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
//              markPoint : {
//                data : [
//                  {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
//                  {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
//                ]
//              },
//              markLine : {
//                data : [
//                  {type : 'average', name : '平均值'}
//                ]
//              }
//            },
//            {
//              name:'押金',
//              type:'bar',
//              data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
//              markPoint : {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
//              },
//              markLine : {
//                data : [
//                  {type : 'average', name: '平均值'}
//                ]
//              }
//            },
//            {
//              name:'医药费',
//              type:'bar',
//              data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
//              markPoint : {
//                data : [
//                  {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
//                  {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
//                ]
//              },
//              markLine : {
//                data : [
//                  {type : 'average', name : '平均值'}
//                ]
//              }
//            }
          ]
        },
        incomePieOption5:{
          title : {
//            text: '当月收入构成比',
            x:'center'
          },
          color: ["#3cbbb0", "#f6b91c", "#fa7a53", "#7089ce", "#61deb9"],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
//            data:['餐饮费','床位费','押金','医药费']
          },
          series: [
            {
              name:'',
              type:'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
//                {value:335, name:'餐饮费'},
//                {value:310, name:'床位费'},
//                {value:234, name:'押金'},
//                {value:135, name:'医药费'}
              ]
            }
          ]
        },
        emPieOption6:{
          title : {
//            text: '员工部门构成比',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
//            data:['财政部','行政部','管理部','医疗部','护理部']
          },
          color: ["#3cbbb0", "#7089ce", "#faa753", "#f68d58", "#52d0cc", "#f6b91c", "#f68d58"],
          series : [
            {
              name: '',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
//                {value:280, name:'财政部'},
//                {value:200, name:'行政部'},
//                {value:120, name:'管理部'},
//                {value:20, name:'医疗部'},
//                {value:150, name:'护理部'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        bedColumnOption7:{
          title : {
//            text: '团队及床位分布',
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '8%',
            containLabel: true
          },
          legend: {
//            data:['成员数','分配床位数']
          },
          color: ["#3cbbb0", "#f6b91c", "#fa7a53", "#7089ce", "#61deb9"],
          calculable : true,
          xAxis : [
            {
              type : 'category',
//              data : ['护理一组','护理二组','护理三组','护理四组','护理五组','护理六组']
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
//            {
//              name:'成员数',
//              type:'bar',
//              data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
//              markPoint : {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
//              },
//              markLine : {
//                data : [
//                  {type : 'average', name: '平均值'}
//                ]
//              }
//            },
//            {
//              name:'分配床位数',
//              type:'bar',
//              data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
//              markPoint : {
//                data : [
//                  {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
//                  {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
//                ]
//              },
//              markLine : {
//                data : [
//                  {type : 'average', name : '平均值'}
//                ]
//              }
//            },
          ]
        },
        jobLineOption8:{
          title : {
//            text: '入离职趋势',
          },
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            orient: 'vertical',
            right: 'right',
//            data:['在职','离职']

          },
          color:["#f6b91c", "#7089ce"],
          calculable : true,
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
//              data : ['1月','2月','3月','4月','5月','6月','7月']
            }
          ],
          yAxis : [
            {
              type : 'value',
              axisLabel : {
                formatter: '{value}'
              }
            }
          ],
          series : [
//            {
//              name:'在职',
//              type:'line',
//              data:[11, 11, 15, 13, 12, 13, 10],
//              markPoint : {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
//              },
////          markLine : {
////            data : [
////              {type : 'average', name: '平均值'}
////            ]
////          }
//            },
//            {
//              name:'离职',
//              type:'line',
//              data:[1, 2, 2, 5, 3, 2, 0],
//              markPoint : {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
//              },
////          markLine : {
////            data : [
////              {type : 'average', name : '平均值'}
////            ]
////          }
//            },
          ]
        },
        roomPieOption9:{
          title : {
//            text: '房间状态',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
//            data:['使用中','被预约','不可用']
          },
          color: ["#3cbbb0", "#7089ce", "#faa753", "#f68d58", "#52d0cc", "#f6b91c", "#f68d58"],
          series : [
            {
              name: '',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
//                {value:280, name:'使用中'},
//                {value:200, name:"被预约"},
//                {value:120, name:'不可用'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        roomPieOption10:{
          title : {
//            text: '房间标准',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
//            data:['2人间','4人间','6人间','8人间']
          },
          color: ["#3cbbb0", "#7089ce", "#faa753", "#add061", "#52d0cc", "#f6b91c", "#f68d58"],
          series : [
            {
              name: '',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
//                {value:280, name:'2人间'},
//                {value:200, name:"4人间"},
//                {value:120, name:'6人间'},
//                {value:120, name:'8人间'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        bedIncomeColumnOption11: {
          title : {
//            text: '床位收费情况',
          },
          color: ['#ADD061'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
//              data : ['单人间','2人间','4人间','6人间','8人间'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'',
              type:'bar',
              barWidth: '50%',
//              data:[10, 52, 200, 334, 390]
            }
          ]
        },
      }
    },
    methods: {
      init(){
        this.getOrgInfo();
        this.getOrgAgencyPieChart();
        this.getOrgAgeRelatedRateChart();
        this.getOrgMemberCareLevelBarChart();
        this.getOrgFiscalRevenueShareChart();
        this.getFiscalPieChart();
        this.getOrgDepartmentCompositionRatioChart();
        this.getOrgTeamAndBedDistributionChart();
        this.getOrgEmployeeTurnoverTrendChart();
        this.getOrgRoomStatusChart();
        this.getOrgStandardRoomChart();
        this.getBedFiscalBarChart();
      },
      /**
       * 企业信息
       */
      getOrgInfo(){
        let self = this;
        businessApi.getOrgInfo().then(res => {
          self.orgInfo = res.body.data;
        }, res => {});
      },
      /**
       * 男女饼图
       */
      getOrgAgencyPieChart(){
        let self = this;
        businessApi.getOrgAgencyPieChart().then(res => {
          self.sexPieOption1 = res.body.data;
        }, res => {});
      },
      /**
       * 年龄构成比
       */
      getOrgAgeRelatedRateChart(){
        let self = this;
        businessApi.getOrgAgeRelatedRateChart().then(res => {
          self.agePieOption2 = res.body.data;
        }, res => {});
      },
      /**
       * 照护等级柱状图
       */
      getOrgMemberCareLevelBarChart(){
        let self = this;
        businessApi.getOrgMemberCareLevelBarChart().then(res => {
          self.careColumnOption3 = res.body.data;
        }, res => {});
      },

      /**
       * 财政收入占比
       */
      getOrgFiscalRevenueShareChart(){
        let self = this;
        businessApi.getOrgFiscalRevenueShareChart().then(res => {
          self.financeColumnOption4 = res.body.data;
        }, res => {});
      },
      /**
       * 当月收入构成比
       */
      getFiscalPieChart(){
        let self = this;
        businessApi.getFiscalPieChart().then(res => {
          self.incomePieOption5 = res.body.data;
        }, res => {});
      },
      /**
       * 员工部门构成
       */
      getOrgDepartmentCompositionRatioChart(){
        let self = this;
        businessApi.getOrgDepartmentCompositionRatioChart().then(res => {
          self.emPieOption6 = res.body.data;
        }, res => {});
      },
      /**
       * 团队及床位分布
       */
      getOrgTeamAndBedDistributionChart(){
        let self = this;
        businessApi.getOrgTeamAndBedDistributionChart().then(res => {
          self.bedColumnOption7 = res.body.data;
        }, res => {});
      },
      /**
       * 入离职
       */
      getOrgEmployeeTurnoverTrendChart(){
        let self = this;
        businessApi.getOrgEmployeeTurnoverTrendChart().then(res => {
          self.jobLineOption8 = res.body.data;
        }, res => {});
      },
      /**
       * 房间状态
       */
      getOrgRoomStatusChart(){
        let self = this;
        businessApi.getOrgRoomStatusChart().then(res => {
          self.roomPieOption9 = res.body.data;
        }, res => {});
      },
      /**
       * 房间标准
       */
      getOrgStandardRoomChart(){
        let self = this;
        businessApi.getOrgStandardRoomChart().then(res => {
          self.roomPieOption10 = res.body.data;
        }, res => {});
      },
      /**
       * 床位收费情况
       */
      getBedFiscalBarChart(){
        let self = this;
        businessApi.getBedFiscalBarChart().then(res => {
          self.bedIncomeColumnOption11 = res.body.data;
        }, res => {});
      },
    },
//    mounted: function () {
//      this.init();
//    },
    beforeMount:function () {
      this.init();
    },

    components: {
      echart
    }
  }
</script>

<style>
  .business-centre .centre-main .chart{
    height: 360px;
  }
  .business-centre .centre-top{

  }
  .business-centre .centre-top .block{
    width: 100%;
    height: 200px;
    /*border: 1px solid #ddd;*/
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    border-radius: 3px;
    color: rgba(0,0,0, 0.87);
    background: #F9FAFC;
    text-align: center;
    padding-top: 12px;
  }
  .business-centre .centre-top .block .number{
   font-size: 80px;
  }
  .business-centre .centre-top .block .words{
    font-size: 30px;
    color:rgb(145,140,140);
  }
  .business-centre .centre-top .block .ps{
    font-size: 18px;
    margin-top: -15px;
    color:rgb(145,140,140);
  }




</style>
